<template>
  <div class="alphabet"  ref="area_scroll">
    <div class="scroll_wrap">
      <div class="hot_wrap citylist">
        <div class="title">热门城市</div>
        <ul class="hot_city">
          <!-- 子组件可以使用 $emit 触发父组件的自定义事件。 -->
          <li  @click="$emit('selectCity',item)"  v-for="(item,index) in cityInfo.hotCities" :key="index">{{item.name}}</li>
        </ul>
      </div>
      <!-- 所有城市 -->
      <div class="city_wrap">
        <div class="city_content citylist" v-for="(item,index) in keys" :key="index">
          <div class="title">{{item}}</div>
          <!-- 根据字母key展示城市名 -->
          <ul>
                <!-- 子组件可以使用 $emit 触发父组件的自定义事件。 -->
            <li  @click="$emit('selectCity',city)" v-for="(city,index) in cityInfo[item]" :key="index">{{city.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="area_keys">
       <ul>
        <li @click="selectKey(0)">#</li>
        <li @click="selectKey(index+1)" v-for="(item,index) in keys" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "Alphabet",
  props: {
    cityInfo: Object,
    keys: Array
  },
  data() {
      return {
          scroll: null
      }
  },
  methods: {
    // 初始化实例
      initScroll() {
            this.scroll = new BScroll(this.$refs.area_scroll, {
              click: true
            });
      },
      //点击字母滚动到字母表相应的位置
      selectKey(index) {
            //  console.log(index);
            //  console.log(this.$refs.area_scroll.getElementsByClassName( "citylist"));  //打印出来长度为23
             const  citylist  = this.$refs.area_scroll.getElementsByClassName( "citylist");
             console.log(citylist[index]);
              // 根据下标,滚动到相对应的元素上
              let element = citylist[index];
              // 滚动到对应的位置上
             console.log(this.scroll);
              //根据class获取dom元素
             this.scroll.scrollToElement(element, 300);

      }
  },
}; 
</script>
<style scoped>
.alphabet {
 margin-top: 10px;
 /* 设置这个属性后 宽度= padding +margin+ width+ border */
  box-sizing: border-box;
  padding: 0 16px;
  background: #fff;
  height: calc(100% - 65px);
  /* 内容会被修剪，并且其余内容是不可见的。 */
  overflow: hidden;  
}
.scroll_wrap {
   background: #fff;
   /* 果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
   overflow: auto;
}
.title {
  color: #aaa;
  padding: 15px 0;
}
.hot_city {
  /* flex 布局   方向往右   可以多行容纳 */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.hot_city  li {
   width:33%;
   background: #f1f1f1;
   /* 居中显示 */
   text-align: center;
   /* 设置外边距 */
     padding: 10px;
     /* 设置这个属性后 宽度= padding +margin+ width+ border */
  box-sizing: border-box;
   margin: 0 10px 10px 0;
}
.city_content li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.area_keys {
  /* 根据right  的位置而定 */
  position: fixed; 
  right: 0;
  top: 25%;
  color: #aaa;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  padding: 0 5px;
}
</style>

